import React, {useState} from "react";

import './index.scss'

import LOGO from '../../assets/logo.svg'
import CheckBox from "../../components/CheckBox";

import uaa from '../../api/uaa.js'

export default function Login(props) {

    const [form, setForm] = useState({
        name: '',
        password: '',
        remember: false
    })

    function login() {
        console.log(form)
        uaa.login(form).then(resp => {
            console.log(resp.data)
            props.history.push('/')
        })
    }

    return (
        <div className={ 'login-form-warp' } >
            <div className={ 'slogo' }>
                <div className={ 'app-logo' }>
                    <img src={ LOGO } alt={ '' } />
                </div>
                <h2 className={ 'app-name' }> CCOOL </h2>
                <p className={ 'app-desc' } >个人数据管理平台</p>
            </div>
            <form className={ 'login-form' }>
                <div className={ 'form-item' }>
                    <div className={ 'input-warp' }>
                        <input
                            type={ 'text' }
                            placeholder={ '用户名' }
                            value={ form.name }
                            onChange={ ({target}) => { setForm({...form, name: target.value}) } }
                        />
                    </div>
                </div>
                <div className={ 'form-item' }>
                    <div className={ 'input-warp' }>
                        <input
                            type={ 'password' }
                            placeholder={ '密码' }
                            value={ form.password }
                            onChange={ ({target}) => { setForm({...form, password: target.value}) } }
                        />
                    </div>
                </div>
                <div className={ 'remember-password' } >
                    <CheckBox
                        label={ '记住密码' }
                        checked={ form.remember }
                        onChange={ checked => { setForm({...form, remember: checked}) } } />
                </div>
                <button type={ 'button' } className={ 'submit' } onClick={ login } >登录</button>
            </form>
        </div>
    )
}